<template>
  <div>
    <ul>
        <li><router-link to='/contacts/allcontacts'>All contacts</router-link></li>
        <li><router-link to='/contacts/alice'>Alice</router-link></li>
        <li><router-link to='/contacts/bob'>Bob</router-link></li>
    </ul>
    <button @click="ChangName">随机显示</button>
    <div class="box">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:['Allcontacts','Alice','Bob'],
      PathName:''
    }
  },
  methods:{
    ChangName(){
      this.PathName = Math.floor(Math.random() * this.list.length)
      this.$router.push({
        name: `${this.list[this.PathName]}`,
      });
    }
  }
}
</script>

<style>
.box{
    margin-top: 10px;
}
</style>